feat(core): eliminate global styles - #2632
Open
danielleroux wants to merge 64 commits into
Open
Conversation
🦋 Changeset detectedLatest commit: 39c7048 The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for ix-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Important Review skippedToo many files! This PR contains 595 files, which is 495 over the limit of 100. To get a review, reduce the PR to 100 files or fewer by splitting it into smaller PRs or changing its base branch. Upgrade to a paid plan to raise the limit. Usage-priced reviews support at most 300 files. ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (771)
📒 Files selected for processing (595)
You can disable this status message by setting the ✨ Finishing Touches🧪 Generate unit tests (beta)
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request refactors the styling architecture of the @siemens/ix package by introducing new foundation and legacy utility CSS entry points (siemens-ix-foundation.css and siemens-ix-legacy-utilities.css) to facilitate incremental migration. It also modularizes component styling by moving token defaults from the global theme output into dedicated component *.vars.scss files using local --ix-* custom properties. Additionally, a test button has been added to the ix-playground component. No review comments were provided, so I have no feedback to offer.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
Collaborator
Author
|
@coderabbitai review |
✅ Action performedReview finished.
|
kathrinschalber
requested changes
Aug 3, 2026
kathrinschalber
left a comment
kathrinschalber
left a comment
Collaborator
There was a problem hiding this comment.
A few things that need to be checked.
Collaborator
There was a problem hiding this comment.
striped style is gone
Collaborator
There was a problem hiding this comment.
[ToDo in Theme generator] Border is not visible anymore -> change token for readonly
Collaborator
There was a problem hiding this comment.
Is correctly set, @silviowolf would it make sense to the ref-token for border-4 in classic theme? it's barely visible....
Collaborator
There was a problem hiding this comment.
how did the input field (color-component-8) change?
Collaborator
There was a problem hiding this comment.
Similar to category filter -> border in readonly/disabled
Collaborator
Author
There was a problem hiding this comment.
Will be fixed via token update
Collaborator
There was a problem hiding this comment.
was this intentional, that the checkbox has no background (anymore)?
Collaborator
Author
There was a problem hiding this comment.
Need to be check if v6 still supports legacy native input element, maybe need deprecation blog/post.
Collaborator
There was a problem hiding this comment.
Textarea (light theme) stayed colored, in contrast to e.g. selects
Collaborator
Author
There was a problem hiding this comment.
Textarea test covers the legacy native components not the ix-textarea. Will maybe be removed with v6
kathrinschalber
requested changes
Aug 4, 2026
Collaborator
There was a problem hiding this comment.
For 6.0, doublecheck:
- app header background-3
- app menu background-2
Collaborator
Author
There was a problem hiding this comment.
Is already aligend with element. background-1 is correct. Figma needs to be adapted
Collaborator
There was a problem hiding this comment.
Fonts in critical variant should be all white. Also, to me they look not at all similar to the Figma
Collaborator
There was a problem hiding this comment.
Light theme is correct, but in dark theme critical should have a white font as well
Collaborator
There was a problem hiding this comment.
the icon should turn orange too
Collaborator
Author
There was a problem hiding this comment.
Need to be adapted inside input-helper-new.json of the token json
Collaborator
There was a problem hiding this comment.
Shadow on dropdown is not visible (dark mode only)
Collaborator
Author
There was a problem hiding this comment.
Shadow exist also in darkmode, but due the background color change, its not visible anymore
Collaborator
There was a problem hiding this comment.
@silviowolf please validate whether
- border colors should be used for the lines and text for the icons, and
- if we need a better matching color for the selected step (should the dot be also gray?)
PS: Also see the dark version of this: testing/visual-testing/screenshots/tests/workflow-steps/workflow-steps.e2e.ts/workflow-steps-basic-1-chromium---classic-dark-linux.png
3 tasks
kathrinschalber
requested changes
Aug 7, 2026
Collaborator
There was a problem hiding this comment.
icon is decorative -> change to background tokens
danielleroux
force-pushed
the
feat/remove-global-css
branch
from
August 13, 2026 11:26
1189b90 to
b31df5f
Compare
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
|
benjgil
reviewed
Aug 19, 2026
| @use '../tokens/system' as sys; | ||
|
|
||
| body { | ||
| color: #{sys.$si-sys-text-primary}; |
Collaborator
There was a problem hiding this comment.
how does this change with the theme (e.g. dark/light) if it's a fixed sass variable?
Collaborator
Author
There was a problem hiding this comment.
its interpolation of sass, so no fixed sass variable after build
nuke-ellington
requested changes
Aug 19, 2026
| @@ -7,7 +7,7 @@ catalog: | |||
| '@axe-core/playwright': ^4.11.0 | |||
| '@esbuild/linux-arm64': 0.27.2 | |||
| '@playwright/test': ^1.58.1 | |||
| '@siemens/ix-icons': ^3.5.0 | |||
| '@siemens/ix-icons': 0.0.0-20260811100620 | |||
Collaborator
There was a problem hiding this comment.
Reminder to go back to released version
|
|
||
| | Before | After | | ||
| | ------------------------------------------ | ------------------------------------ | | ||
| | `--theme-si-sys-text-primary` | `--si-sys-text-primary` | |
Collaborator
There was a problem hiding this comment.
Before it used to be --theme-color-primary etc.
| color: var(--si-sys-text-primary); | ||
| ``` | ||
|
|
||
| The public Sass variable names remain unchanged: |
Collaborator
There was a problem hiding this comment.
This looks like it refers to an intermediary implementation step not the actual migration guide
| @import '@siemens/ix/css/legacy.css'; | ||
| ``` | ||
|
|
||
| Foundation styles document scrollbars automatically. Add `disable-scrollbar` to |
Collaborator
There was a problem hiding this comment.
?
Suggested change
| Foundation styles document scrollbars automatically. Add `disable-scrollbar` to | |
| Foundation styles enable scrollbars automatically. Add `disable-scrollbar` to |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Migrate Siemens Industrial Experience (iX) to the Siemens Design Language (SDL) foundation, specifically SI Theme 6 system and reference tokens, while improving interoperability with host applications.
This resolves #1398 by preventing the default iX stylesheet from applying the previous native reset and form-control styling across the entire page.
This is Phase 1: foundation tokens, theming architecture, and opt-in global CSS. It does not claim complete SDL/Figma compliance for every component and visual state.
EIX-3
EIX-10
EIX-69
EIX-184
Approach
--si-sys-*and--si-ref-*. The previous--theme-si-*aliases are no longer emitted.--ix-*properties mapped to SI Theme 6 system tokens.--theme-<component>-*aliases. These aliases no longer control migrated iX components.iconColor,itemColor, andNotificationColornow require complete custom-property names, for example--si-sys-text-danger.CSS entry points
@siemens/ix/css/default.css@siemens/ix/css/foundation.css@siemens/ix/css/reset.css@siemens/ix/css/base.css@siemens/ix/css/scrollbar.css[data-ix-scrollbars]@siemens/ix/css/utilities.css@siemens/ix/css/globals.css@siemens/ix/css/legacy.cssApplications that require the previous aggregate behavior can temporarily use:
Included in this PR
--theme-si-*tokens to--si-sys-*and--si-ref-*.--ix-*properties and SI Theme 6 mappings.--theme-<component>-*aliases from standard theme output.BREAKING_CHANGES/v6.md.@siemens/ix,@siemens/ix-aggrid, and@siemens/ix-echarts.--si-sys-background-activeis emitted by the classic themes.Follow-ups
legacy.css, or document an explicit exception.--ix-*mapping against SDL/Figma roles beyond snapshot coverage.Breaking changes
--theme-si-sys-*becomes--si-sys-*.--theme-si-ref-*and--theme-si-classic-ref-*become--si-ref-*.--theme-<component>-*aliases are removed from standard theme output.--ix-*properties.--.getComputedCSSPropertyin@siemens/ix-echartsno longer adds a--theme-prefix.See
BREAKING_CHANGES/v6.mdfor migration examples and replacement entry points.Release impact
@siemens/ix@siemens/ix-echarts@siemens/ix-aggridDefinition of done for this phase
This phase is ready to merge when:
@siemens/ix/css/default.cssthemes iX components without applying the previous native reset and form-control styling.--theme-si-*properties.--ix-*properties.Out of scope
This PR does not claim:
--theme-*common token.